<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>吉林师范大学新生基本信息核查表</title>
    <meta name="approvalStatus" th:content="${approvalStatus}">
    <meta name="approvalRemark" th:content="${approvalRemark}">
    <meta name="outsideType" th:content="${outsideType}">
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            width: 100vw;
            height: 100%;
            box-sizing: border-box;
            font-family: 'SimSun', sans-serif;
        }
        .imageStyle {
            width: 190px;
            height: 140px;
        }
        .imageStyle1 {
            width:150px;
            height: 200px;
        }
        .button-container {
            display: flex;
            justify-content: flex-end; /* 右对齐 */
        }
        /* 全局滚动条样式（适配图片风格） */
        ::-webkit-scrollbar {
            width: 8px;                  /* 调整为更纤细的浅灰条 */
            background: transparent;     /* 轨道透明以融入背景 */
        }

        ::-webkit-scrollbar-thumb {
            background: #dee2e6;          /* 浅灰与表格边框同色 */
            border: 2px solid #ffffff;    /* 白边增强对比 */
            border-radius: 4px;           /* 圆角与表格按钮统一 */
            transition: all 0.3s ease;
        }

        /* 悬停状态（保留原功能提示） */
        ::-webkit-scrollbar-thumb:hover {
            background: #ced4da;          /* 加深10%的灰色 */
            transform: scaleX(1.1);
        }

        /* 激活状态（呼应黄按钮） */
        ::-webkit-scrollbar-thumb:active {
            background: #ffd43b;          /* 黄色与预览按钮呼应 */
        }

        /* Firefox兼容方案 */
        * {
            scrollbar-width: thin;
            scrollbar-color: #dee2e6 #fff; /* 浅灰滑块+白色轨道 */
        }
        .borderStyle {
            border-left: 2px solid #000 !important;
        }
        .borderBotton {
            border-bottom: 2px solid #000 !important;
        }
        .sizeStyle {
            text-align: center;
            font-size: 26px;
            letter-spacing: 2px;
            font-weight: 600;
        }
        .spacing-table {
            border-collapse: separate;   /* 必须设为 separate */
            border-spacing: 0;          /* 单元格间距归零 */
            border: none;
        }

        /* 精准控制边框 */
        .spacing-table td,
        .spacing-table th {
            border-bottom: none;
            border-left: none;
        }
        .textStyle {
            margin: auto;
            width: 70%;
            margin-top: 10px;
            line-height: 30px
        }

        /* 隐藏最后一个行的底部边框 */
        .spacing-table tr:last-child td,
        .spacing-table tr:last-child th {
            border-bottom: none;
        }
        #box {
            width: 100%;
            min-width: 800px;
            transform: scale(0.9);
            transform-origin: top center;
        }

        table {
            border: 1px solid #000;
            border-collapse: collapse;
            width: 70%;
            margin: auto;
            table-layout: fixed;
        }

        th,
        td {
            padding: 16px 10px;
            word-break: break-all;
            border: 2px solid #000;
            text-align: center;
            font-size: 16px;
            font-weight: 600;
        }

        span {
            padding: 0 5px;
        }


        @media print {
            body {
                transform: scale(1);
                min-width: auto;
            }
            #box {
                min-width: auto;
                transform: none;
            }
            #printButton {
                display: none; /* 确保打印时不显示 */
            }
        }
    </style>
</head>

<body>
<div id="box">
    <h1 class="sizeStyle">吉林师范大学新生基本信息核查表</h1>

    <table class="spacing-table" style="margin-top: 20px">
        <!-- 左侧原始列 -->
        <tr>
            <th style="width: 20%;" class="borderStyle">姓&ensp;&ensp;&ensp;&ensp;名</th>
            <td th:text="${name}" style="width: 30%;"></td>
            <th style="width: 16%">性&ensp;&ensp;&ensp;&ensp;别</th>
            <td th:text="${gender}" style="width: 28%"></td>
            <th rowspan="5" style="vertical-align: middle;width: 20%">
                <!-- 有照片时显示图片 -->
                <div class="button-container" th:if="${studentUrl}">
                    <img
                            class="imageStyle1"
                            th:if="${photo}"
                            th:src="${photo}"
                            style="width:100%;vertical-align:middle;"
                            alt="证件照"
                    >
                </div>
                <!-- 无照片时显示文字 -->
                <span th:unless="${photo}">2寸照片</span></th>
        </tr>

        <tr>
            <th class="borderStyle">出生日期</th>
            <td th:text="${birthDate}"></td>
            <th>民&ensp;&ensp;&ensp;&ensp;族</th>
            <td th:text="${ethnicity}"></td>
        </tr>

        <tr>
            <th class="borderStyle">学&ensp;&ensp;&ensp;&ensp;院</th>
            <td th:text="${college}"></td> <!-- 原代码中 birthDate 应为学院字段 -->
            <th>专&ensp;&ensp;&ensp;&ensp;业</th>
            <td th:text="${academicMajor}"></td>
        </tr>

        <tr>
            <th class="borderStyle">学&ensp;&ensp;&ensp;&ensp;号</th>
            <td th:text="${studentId}"></td>
            <th>联系方式</th>
            <td th:text="${contactNumber}"></td>
        </tr>

        <tr>
            <th class="borderStyle">身份证号</th>
            <td th:text="${idCardNumber}"></td>
            <th>身&ensp;&ensp;&ensp;&ensp;高</th>
            <td th:text="${height}"></td>
        </tr>
    </table>
    <table class="spacing-table">
        <tr>
            <th style="width: 14.8%;" class="borderStyle">详细家庭地址</th>
            <td th:text="${familyDetailedAddress}" style="width: 33%"></td>
            <th style="width: 14%">邮编</th>
            <td th:text="${postalCode}" style="width: 25%"></td>
        </tr>
    </table>
    <table class="spacing-table">
        <tr>
            <th style="width: 19%;" class="borderStyle">家庭主要成员</th>
        </tr>
    </table>

    <table class="spacing-table">
        <tr>
            <th style="width: 19%;" class="borderStyle">姓名</th>
            <th style="width: 19%;">关系</th>
            <th style="width: 19%;">工作单位</th>
            <th style="width: 19%;">职务</th>
            <th style="width: 19%;">联系电话</th>
        </tr>



        <tr th:each="member, iterStat : ${familyInfo}">
            <th style="width: 19%;" class="borderStyle"
                th:text="${member.familyMember1Name} ?: '&ensp;'"></th>
            <th style="width: 19%;"
                th:text="${member.familyMember1Relationship} ?: '&ensp;'"></th>
            <th style="width: 19%;"
                th:text="${member.familyMember1WorkUnit} ?: '&ensp;'"></th>
            <th style="width: 19%;"
                th:text="${member.familyMember1Position} ?: '&ensp;'"></th>
            <th style="width: 19%;"
                th:text="${member.familyMember1Phone} ?: '&ensp;'"></th>
        </tr>
<!--        <tr>-->
<!--            <th style="width: 19%;" class="borderStyle" th:text="${familyMember1Name}">&ensp;</th>-->
<!--            <th style="width: 19%;" th:text="${familyMember1Relationship}">&ensp;</th>-->
<!--            <th style="width: 19%;" th:text="${familyMember1WorkUnit}">&ensp;</th>-->
<!--            <th style="width: 19%;" th:text="${familyMember1Position}">&ensp;</th>-->
<!--            <th style="width: 19%;" th:text="${familyMember1Phone}">&ensp;</th>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <th style="width: 19%;" class="borderStyle" th:text="${familyMember1Name}">&ensp;</th>-->
<!--            <th style="width: 19%;" th:text="${familyMember1Relationship}">&ensp;</th>-->
<!--            <th style="width: 19%;" th:text="${familyMember1WorkUnit}">&ensp;</th>-->
<!--            <th style="width: 19%;" th:text="${familyMember1Position}">&ensp;</th>-->
<!--            <th style="width: 19%;" th:text="${familyMember1Phone}">&ensp;</th>-->
<!--        </tr>-->


    </table>

    <table class="spacing-table">
        <tr>
            <th style="width: 24%" class="borderStyle">录取通知书邮寄地址</th>
            <td th:text="${admissionLetterAddress}" style="width: 38%"></td>
            <th style="width: 14%">收件人</th>
            <td th:text="${addressee}"></td>
        </tr>
    </table>


    <table class="spacing-table">
        <tr>
            <td style="width: 70px; writing-mode: vertical-rl;" class="borderStyle">本人承诺</td>
            <td style="text-align: left;">
                <div style="text-indent: 2em;">
                    <p style="line-height: 26px;letter-spacing: 2px;margin: 0">
                        本人承诺以上信息为本人真实情况，本人不存在冒名顶替参加高考、研
                        究生考试的行为。如本人所填情况与事实不符或有违反相关法律法规的行
                        为，同意学校按规定处理并自愿承担相应的法律责任。
                    </p>
                    <div class="button-container" th:if="${studentUrl}">
                        <img class="imageStyle" th:src="${studentUrl}"  alt="">
                    </div>
                    <div th:unless="${studentUrl}">
                        <p style="justify-content: space-between; text-align: right;margin-right: 55px">
                            <span>承诺人（签名）：</span>
                        </p>

                        <p style="text-align: right;margin-right: 15px;margin: 0"><span th:text="${returnYear}"></span>年<span th:text="${returnMonth}"></span>&ensp;&ensp;月<span th:text="${returnDay}"></span>&ensp;&ensp;日</p>

                    </div>
                </div>
            </td>
        </tr>
    </table>
    <table class="spacing-table">
        <tr>
            <td style="text-align: left;" class="borderStyle borderBotton">


                <div class="button-container" th:if="${studentUrl}">
                    <img class="imageStyle" th:src="${studentUrl}"  alt="">
                </div>

                <div style="text-indent: 2em;" th:unless="${studentUrl}">
                    <p style="justify-content: space-between; text-align: left;">
                        <span>学生本人签字：</span>
                    </p>
                    <p style="text-align: right;margin-right: 25px;margin-top: 40px;margin: 0"><span th:text="${returnYear}"></span>年<span th:text="${returnMonth}"></span>&ensp;&ensp;月<span th:text="${returnDay}"></span>&ensp;&ensp;日</p>

                </div>
            </td>
            <td style="text-align: left;" class="borderBotton">
                <div style="text-indent: 2em;">
                    <p style="justify-content: space-between;text-align: left;">
                        <span>负责人签字（学院公章）：</span>
                    </p>
                    <p style="text-align: right;margin-right: 25px;margin-top: 40px"><span th:text="${returnYear}"></span>年<span th:text="${returnMonth}"></span>&ensp;&ensp;月<span th:text="${returnDay}"></span>&ensp;&ensp;日</p>

                </div>
            </td>
        </tr>
    </table>
    <p class="textStyle">注：1.以学院单位，集中地点、时间，组织学生统一填写各项内容；2.照片需是入校后统一采集，家庭成员填写父亲、母亲或直接监护人；3.其它各项如通知书邮寄地址、收件人等须与高考、研究生考试填报信息一致；4.本表一式两份，按学号排序整理，一份装入学生学籍档案，一份交学生处送学校档案馆存档。</p>
</div>
<!--<button id ="printButton" onclick="window.print()"  style="position: fixed; bottom: 20px; right: 20px; padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;">打印报告</button>-->
</body>

</html>
